<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1.插槽 slot  重点-->
    <!-- 普通插槽 具名插槽 -->

    <!-- 2.前端模块化 因为随着前端的东西越来越多 可能随之而来的js，css，文件多了起来 重点 -->
    <!-- 模块化的核心理念 导出和导入 -->
    <!-- 可能会声明一样的变量，导致一些不必要的bug出现 -->
    <!-- commonjs amd cmd es6的module -->
    <!-- commonjs -->
    <!--导出 module.exports = {
        add(a,b){
            return a + b
        },
        flag:false
    } -->
    <!--导入 let { add ,flag } = require('./a.js') -->

    <!-- 3.webpack 了解要会用 -->
    <!-- 安装全局 npm install webpack -g -->
    <!-- 创建了一些必要的文件 src(写了部分js的文件) dist(打包后的js存放的地方) html文件承载 -->
    <!-- 全局打包 webpack ./src/main.js(需要打包的文件) ./dist/bundle.js(打包后的js文件也就是我们html引入的文件) -->
    <!-- webpack.config.js(webpack的配置文件) -->
    <!-- const path = require('path');//webpack自带的路由地址
    module.exports = {
        entry: './src/main.js',//字符串 数组 对象 需要打包的入口文件
        output: {
            path: path.resolve(__dirname, './dist'),//打包后需要放进去的文件夹
            filename: 'bundle.js'//打包后的文件名字
        },
    } -->
    <!-- 有了配置文件我们就只要webpack就可以直接打包 -->

    <!-- 局部(方便每一位开发者统一该项目的webpack版本) -->
    <!-- 先项目初始化 npm init -->
    <!-- 安装局部webpack  npm install webpack -->
    <!-- 去package.json文件中的scrpts里面添加一个配置 -->
    <!-- "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack" //这里这样封装后就可以 npm run build进行打包
    }, -->
    <!-- 如果说要处理css的文件 还有less的文件 图片等等 -->
    <!-- 我们需要去下载相对应的loader -->
    <!-- 要在外面要打包的文件引入这个css或者其他 -->
    <!-- 还要在webpack.config.js中添加相对应的配置 -->
</body>
</html>